<template>
  <div>
    <!-- header部分开始 -->
    <HeaderBar />
    <!-- header部分结束 -->
    <!-- banner部分开始 -->
    <div class="banner">
      <ul class="pic">
        <li class="cur">
          <a href="#"><img src="@/assets/images/img11.png" alt=""></a>
        </li>
        <li>
          <a href="#"><img src="@/assets/images/img12.png" alt=""></a>
        </li>
        <li>
          <a href="#"><img src="@/assets/images/img13.png" alt=""></a>
        </li>
      </ul>
      <ol class="circle">
        <li class="cur" />
        <li />
        <li />
      </ol>
    </div>
    <!-- banner部分结束 -->
    <!-- qingzhu_content部分开始 -->
    <div class="qingzhu_content">
      <div class="qingzhu_content_c inner_c">
        <div class="pro1">
          <div class="title">
            <h2><a href="#">新品推荐，精心挑选</a></h2>
            <p class="info">家居必备使用小单品</p>
          </div>
          <div class="pro_pic">
            <div class="pro_c">
              <ul>
                <li>
                  <a href="#">
                    <img src="@/assets/images/img23.png" alt="">
                    <div class="cont">
                      <h3>黑陶自然花香蜡烛</h3>
                      <span>￥300</span>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="@/assets/images/img24.png" alt="">
                    <div class="cont">
                      <h3>黑陶自然花香蜡烛</h3>
                      <span>￥300</span>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="@/assets/images/img25.png" alt="">
                    <div class="cont">
                      <h3>黑陶自然花香蜡烛</h3>
                      <span>￥300</span>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="@/assets/images/img26.png" alt="">
                    <div class="cont">
                      <h3>黑陶自然花香蜡烛</h3>
                      <span>￥300</span>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
            <div class="btns">
              <a href="#" class="leftBtn">&lt;</a>
              <a href="#" class="rightBtn">&gt;</a>
            </div>
          </div>
        </div>
        <div class="pro2">
          <div class="title">
            <h2><a href="#">专题活动，限时促销</a></h2>
            <p class="info">严选材质，用心设计</p>
          </div>
          <div class="pro2_c">
            <ul class="pro2_c_pic">
              <li class="pic1 pic">
                <a href="#">
                  <img src="@/assets/images/img31.jpg" alt="">
                </a>
                <span />
              </li>
              <li class="pic2 pic">
                <a href="#">
                  <img src="@/assets/images/img32.jpg" alt="">
                </a>
                <span />
              </li>
              <li class="pic3 pic">
                <a href="#">
                  <img src="@/assets/images/img33.jpg" alt="">
                </a>
                <span />
              </li>
            </ul>
          </div>
        </div>
        <div class="pro3">
          <div class="title">
            <h2><a href="#">青竹良品，你的家居首选</a></h2>
            <p class="info">天然之源，诚挚之礼</p>
          </div>
          <div class="pro3_c">
            <ul class="pub_pro">
              <li>
                <a href="#">
                  <img src="@/assets/images/img40.jpg" alt="">
                </a>
                <div class="mask" />
              </li>
              <li>
                <a href="#">
                  <img src="@/assets/images/img41.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class="btn"> 查看详情 </a>
                </div>
              </li>

              <li>
                <a href="#">
                  <img src="@/assets/images/img42.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class="btn"> 查看详情 </a>
                </div>
              </li>
              <li>
                <a href="#">
                  <img src="@/assets/images/img43.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class="btn"> 查看详情 </a>
                </div>
              </li>
              <li>
                <a href="#">
                  <img src="@/assets/images/img44.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class="btn"> 查看详情 </a>
                </div>
              </li>
            </ul>
            <ul class="pub_pro">
              <li>
                <a href="#">
                  <img src="@/assets/images/img45.jpg" alt="">
                </a>
                <div class="mask" />
              </li>
              <li>
                <a href="#">
                  <img src="@/assets/images/img46.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class="btn"> 查看详情 </a>
                </div>
              </li>

              <li>
                <a href="#">
                  <img src="@/assets/images/img47.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class="btn"> 查看详情 </a>
                </div>
              </li>
              <li>
                <a href="#">
                  <img src="@/assets/images/img48.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class="btn"> 查看详情 </a>
                </div>
              </li>
              <li>
                <a href="#">
                  <img src="@/assets/images/img49.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class="btn"> 查看详情 </a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="pro4">
          <div class="title">
            <h2><a href="#">全球大牌优选，买手用心挑选</a></h2>
            <p class="info">全球好货，原装正品</p>
          </div>
          <div class="por4_top">
            <div class="pic1 pic">
              <img src="@/assets/images/img51.jpg" alt="">
              <span />
            </div>
            <div class="pic2">
              <div class="top pic">
                <img src="@/assets/images/img52.jpg" alt="">
                <span />
              </div>
              <div class="bottom pic">
                <img src="@/assets/images/img53.jpg" alt="">
                <span />
              </div>
            </div>
            <div class="pic3 pic">
              <img src="@/assets/images/img54.jpg" alt="">
              <span />
            </div>
          </div>
          <div class="pro4_bottom">
            <ul class="pro4_c">
              <li>
                <div class="pic">
                  <a href="#">
                    <img src="@/assets/images/img55.png" alt="">
                  </a>
                </div>
                <p class="cont">
                  <a href="#"> 自然生活，精选用料 </a>
                </p>
              </li>
              <li>
                <div class="pic">
                  <a href="#">
                    <img src="@/assets/images/img56.png" alt="">
                  </a>
                </div>
                <p class="cont">
                  <a href="#"> 自然生活，精选用料 </a>
                </p>
              </li>
              <li>
                <div class="pic">
                  <a href="#">
                    <img src="@/assets/images/img57.png" alt="">
                  </a>
                </div>
                <p class="cont">
                  <a href="#"> 自然生活，精选用料 </a>
                </p>
              </li>
              <li>
                <div class="pic">
                  <a href="#">
                    <img src="@/assets/images/img58.png" alt="">
                  </a>
                </div>
                <p class="cont">
                  <a href="#"> 自然生活，精选用料 </a>
                </p>
              </li>
              <li>
                <div class="pic">
                  <a href="#">
                    <img src="@/assets/images/img59.png" alt="">
                  </a>
                </div>
                <p class="cont">
                  <a href="#"> 自然生活，精选用料 </a>
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- qingzhu_content部分结束 -->
    <!-- liangpin部分开始 -->
    <div class="liangpin">
      <div class="liangpin_c inner_c">
        <div class="title">
          <h2><a href="#">良品体验</a></h2>
          <p class="info">用户反馈，是我们改进的目标</p>
        </div>
        <div class="lp_pro">
          <ul>
            <li>
              <a href="#" title="">
                <img src="@/assets/images/img61.png" alt="">
              </a>
              <div class="cont">
                <div class="tit">
                  <h4>天草陶石咖啡杯套装</h4>
                  <span>￥299</span>
                </div>
                <p class="info">
                  使用了粉碎高品质的天草陶石后提炼而成的土，制作了泛着淡青色的白瓷。用餐时可以记住食品名称、体会新鲜口味···可对颜色和口味、气味、口感逐个品味，从中感受用餐的乐趣，同时还可自然而然地了解日本饮食文化
                </p>
                <p class="time">
                  <span>alice</span>
                  <span>2016-12-16</span>
                  <span>09:59</span>
                </p>
              </div>
            </li>
            <li>
              <a href="#" title="">
                <img src="@/assets/images/img62.png" alt="">
              </a>
              <div class="cont">
                <div class="tit">
                  <h4>天草陶石咖啡杯套装</h4>
                  <span>￥299</span>
                </div>
                <p class="info">
                  使用了粉碎高品质的天草陶石后提炼而成的土，制作了泛着淡青色的白瓷。用餐时可以记住食品名称、体会新鲜口味···可对颜色和口味、气味、口感逐个品味，从中感受用餐的乐趣，同时还可自然而然地了解日本饮食文化
                </p>
                <p class="time">
                  <span>alice</span>
                  <span>2016-12-16</span>
                  <span>09:59</span>
                </p>
              </div>
            </li>
            <li>
              <a href="#" title="">
                <img src="@/assets/images/img63.png" alt="">
              </a>
              <div class="cont">
                <div class="tit">
                  <h4>天草陶石咖啡杯套装</h4>
                  <span>￥299</span>
                </div>
                <p class="info">
                  使用了粉碎高品质的天草陶石后提炼而成的土，制作了泛着淡青色的白瓷。用餐时可以记住食品名称、体会新鲜口味···可对颜色和口味、气味、口感逐个品味，从中感受用餐的乐趣，同时还可自然而然地了解日本饮食文化
                </p>
                <p class="time">
                  <span>alice</span>
                  <span>2016-12-16</span>
                  <span>09:59</span>
                </p>
              </div>
            </li>
            <li>
              <a href="#" title="">
                <img src="@/assets/images/img64.png" alt="">
              </a>
              <div class="cont">
                <div class="tit">
                  <h4>天草陶石咖啡杯套装</h4>
                  <span>￥299</span>
                </div>
                <p class="info">
                  使用了粉碎高品质的天草陶石后提炼而成的土，制作了泛着淡青色的白瓷。用餐时可以记住食品名称、体会新鲜口味···可对颜色和口味、气味、口感逐个品味，从中感受用餐的乐趣，同时还可自然而然地了解日本饮食文化
                </p>
                <p class="time">
                  <span>alice</span>
                  <span>2016-12-16</span>
                  <span>09:59</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- liangpin部分结束 -->
    <!-- footer部分开始 -->
    <EndBar />
    <!-- 返回顶部 -->
    <SideBar />
  </div>
</template>

<script>
import HeaderBar from '../../components/bars/HeaderBar'
import EndBar from '../../components/bars/EndBar'
import SideBar from '../../components/bars/SideBar'
export default {

  components: {
    HeaderBar,
    EndBar,
    SideBar
  }}
</script>

<style scoped>
@import    '../../assets/css/origincss/reset.css';
@import    '../../assets/css/origincss/index.css';
</style>
